<!--
 * @Descripttion: 
 * @version: 
 * @Author: 彭勃
 * @Date: 2023-03-29 13:31:49
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-04-06 15:18:39
-->
<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="60%"
    @close="close"
    @submit="submit"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules" label-width="140px">
      <el-row type="flex" style="flex-wrap: wrap">
				<el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="店铺名称:" prop="name">
            <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="手机号:" prop="mobile">
            <el-input
              v-model.trim="queryParams.mobile"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-form-item label="店铺地址:" prop="address">
            <el-input
              v-model.trim="queryParams.address"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="营业开始时间:" prop="startTime">
            <el-time-select
              v-model="queryParams.startTime"
              style="width: 100%"
              :max-time="queryParams.endTime"
              placeholder="请选择"
              start="06:00"
              step="00:15"
              end="23:00"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="营业结束时间:" prop="endTime">
            <el-time-select
              v-model="queryParams.endTime"
              style="width: 100%"
              :min-time="queryParams.startTime"
              placeholder="请选择"
              start="06:00"
              step="00:15"
              end="23:00"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="身份证:" prop="idCard">
            <el-input
              v-model.trim="queryParams.idCard"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="真实姓名:" prop="realName">
            <el-input
              v-model.trim="queryParams.realName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="银行卡号:" prop="bankAccount">
            <el-input
              v-model.trim="queryParams.bankAccount"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col> -->
<!--        <el-col :xs="24" :sm="12" :lg="12">-->
<!--          <el-form-item label="银行预留手机号:" prop="bankMobile">-->
<!--            <el-input-->
<!--              v-model.trim="queryParams.bankMobile"-->
<!--              placeholder="请输入"-->
<!--              clearable-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <!-- <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="银行名称:" prop="bankName">
            <el-input
              v-model.trim="queryParams.bankName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="标签:" prop="tag">
            <el-input
              v-model.trim="queryParams.tag"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <!-- 22--{{ queryParams.avatar }} -->
          <el-form-item label="用户头像:" prop="avatar">
            <ImageUpload
              v-model="queryParams.avatar"
              :limit="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { listPage, add, edit, del } from '@/api/operates/shopList/index'

const { proxy } = getCurrentInstance()
const validatePhone = (rule, value, callback)=>{
  if (!value) {
    callback(new Error("请输入"));
  } else if (!proxy.$phoneReg.test(value)) {
    callback(new Error("格式不正确"));
  } else {
    callback();
  }
}
const idCardPhone = (rule, value, callback)=>{
  if (!value) {
    callback(new Error("请输入"));
  } else if (!proxy.$idCardReg.test(value)) {
    callback(new Error("身份证号格式不正确"));
  } else {
    callback();
  }
}
const emit = defineEmits(["success"]);
const dialogType = ref('')
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  address: [{ required: true, message: "请输入", trigger: "blur" }],

  mobile: [{ required: true, validator: validatePhone, trigger: ['blur','change'] }],
  idCard: [{ required: true, validator: idCardPhone, trigger: ['blur','change'] }],
  realName: [{ required: true, message: "请输入", trigger: "blur" }],
  bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
  bankMobile: [{ required: true, validator: validatePhone, trigger: ['blur','change'] }],
  bankName: [{ required: true, message: "请输入", trigger: "blur" }],
  tag: [{ required: true, message: "请输入", trigger: "blur" }],
  avatar: [{ required: true, message: "请上传", trigger: ['change'] }],
  startTime: [{ required: true, message: "请选择", trigger: ['change'] }],
  endTime: [{ required: true, message: "请选择", trigger: ['change'] }],
});
const queryParams = ref({})

function init(type, record){
	dialogType.value = type
	dialogType.value=='add' ? dialog.title='新增' : dialog.title='编辑'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { ...record };
    let arr = record.openTime ? record.openTime.split('~') : ['', '']
    queryParams.value.startTime = arr[0]
    queryParams.value.endTime = arr[1]
	}
};
function close(){
  dialog.visible = false;
  proxy.$refs.formRef.resetFields();
	queryParams.value = {}
};
function submit() {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      let query = {
        ...queryParams.value, 
        // classType: 1,
        openTime: queryParams.value.startTime + '~' + queryParams.value.endTime
      }
      delete query.startTime
      delete query.endTime
      delete query.bankAccount
      delete query.bankMobile
      delete query.bankName
      delete query.createTime
      delete query.fundPassword
      // delete query.id
      delete query.invalid
      delete query.realName
      delete query.subbranch
      delete query.balance



      if(dialogType.value=='add'){
				add(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("新增成功");
						close();
						emit("success",'add');
					} else {
						ElMessage.error(res.message || "新增失败");
					}
				});
			} else {
				edit(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("编辑成功");
						close();
						emit("success",'edit');
					} else {
						ElMessage.error(res.message || "编辑失败");
					}
				});
			}
    }
  });
}
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
